<template lang="pug">
.ProductList
  el-dialog(title="添加产品" :visible="value" @close="close")
    el-form(:model="form" :rules="rules")
      el-form-item(label="产品名称" label-width="100px" prop="name")
        el-input(v-model="form.name")
      el-form-item(label="产品分类" label-width="100px" prop="cate")
        el-select(v-model="form.category_id" clearable filterable)
          el-option(v-for='item in list' :key="item.id" :label="item.name" :value="item.id")
      el-form-item(label="产品标签" label-width="100px")
        el-input(v-if="show" v-model="item" @change="onBox" size="mini" style='width:150px')
        el-tag(v-for='d in form.tags' :key="d" closable type="info" v-if="!show" size="medium" @close="handleClose(d)") {{d}}
        el-button(type="primary" @click="show = true" v-if="!show") 添加
      el-form-item(label="产品图片" label-width="100px" prop="img")
        image-update(v-model="form.pic")
      el-form-item(label="产品介绍" label-width="100px" prop="details")
        el-input(v-model="form.detail")
      el-form-item(label="产品备注" label-width="100px")
        el-input(v-model="form.desc")
      el-form-item(label-width="476px")
        el-button(@click="close") 取 消
        el-button(type="primary" @click="onSubmit") 确 定
</template>
<script>
import ImageUpdate from '@/components/ImageUpdate.vue'
export default {
  props:{
    list:{
      type:Array,
      default:() => ([])
    },
    value:{
      type:Boolean,
      default:false
    }
  },
  components: {
    ImageUpdate
  },
  data() {
    return {
      form:{
        name:'',
        category_id:'',
        tags:[],
        pic:'',
        detail:'',
        desc:''
      },
      show: false,
      item:'',
      lists:[],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        cate: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        img: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        details: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onBox() {
      this.show = false
      this.lists.push(this.item)
      this.form.tags = this.lists
      console.log(this.form.tags);
      this.item=""
    },
    close() {
      this.$emit('input', false)
    },
    onSubmit() {
      this.$emit('proAdd',this.form)
    },
    handleClose(i) {
      console.log(i);
      this.form.tags.splice(this.form.tags.indexOf(i), 1);
    }
  },
}
</script>
